<template>
    <div>
        <div style="background-color: #fff3e0; padding: 15px; margin-bottom: 20px; border-radius: 8px; border-left: 4px solid #FF9800;">
            <h3 style="color: #F57C00; margin-top: 0;">🔍 技术解释：数组过滤与排序计算属性</h3>
            <p><strong>数组过滤 (filter)：</strong>使用Array.filter()方法根据条件筛选数组元素，结合toLowerCase()实现不区分大小写的搜索。</p>
            <p><strong>数组排序 (sort)：</strong>使用Array.sort()和localeCompare()方法对过滤后的结果进行字母排序，确保结果有序展示。</p>
            <p><strong>链式操作：</strong>先过滤再排序，充分利用JavaScript数组方法的链式调用特性，代码简洁高效。</p>
            <p><strong>实时搜索：</strong>计算属性会在filterText变化时自动重新计算，实现实时搜索效果。</p>
        </div>
        <input type="text" v-model="filterText" placeholder="Filter">
        <ul>
            <li v-for="(item, index) in filteredItems" :key="item.id"> {{ item.name }}</li>
        </ul>
    </div>
</template>
<script>
import { computed } from 'vue';

export default{
    data(){
        return{
            items: [
                {id:1,name:"zhangsan"},
                {id:2,name:"lisi"},
                {id:3,name:"wangwu"},
                {id:4,name:"zhaoliu"},
                
            ],
            filterText: '',
        };
    },
    computed:{
        filteredItems(){
            const filtered = this.items.filter( item => {
                return item.name.toLocaleLowerCase().includes(this.filterText.toLocaleLowerCase());
            });
            const sorted = filtered.sort((a,b)=>{
                return a.name.localeCompare(b.name);
            });
            return sorted;
        },
    },
};

</script>